<template>
    <div>demofsdfsafasfsfaf</div>
    <div class="root-app">
        <div class="spp">
            <p>vue3</p>
        </div>
        <p>app</p>
    </div>
    <div>
        <div>姓名：{{ userInfo.name }} 年龄：{{ userInfo.age }}</div>
        <div>token{{ token }}</div>
        <div>getter值{{ newName }}</div>
        <button @click="handleUser">
            <p>更新用户</p>
        </button>
        <button @click="handleAge">
            <p>更新年龄</p>
        </button>
        <button @click="handleToken">
            <p>更新token</p>
        </button>
    </div>
    <div class="p2">
        <p>blue</p>
        <button @click="changeLang('en')">
            <p>English</p>
        </button>
        <button @click="changeLang('zh')">
            <p>中文</p>
        </button>
    </div>
    <p class="vw">vw</p>

    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>模板中使用</td>
            <td>{{ $t('hello') }}</td>
        </tr>
        <tr>
            <td>JS中响应式切换语言</td>
            <td>{{ hel }}</td>
        </tr>
        <tr>
            <td>当前语言类型</td>
            <td>{{ currentLang }}</td>
        </tr>
    </table>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <RouterView />
    <p class="title">less</p>
    <el-button type="button">count is</el-button>
    <el-button type="primary">ele按钮</el-button>

    <div class="app" :class="{ 'dark-theme': isDarkTheme }">
        <button @click="toggleTheme">Toggle Theme</button>
        <p>Current Theme: {{ isDarkTheme ? 'Dark' : 'Light' }}</p>
    </div>
</template>

<script lang="ts" setup name="DemoIndex">
import useLoginStore from '@/store/login.ts';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/user';
import lodash from 'lodash';
import { getList, postList, postList3 } from '@/apis/user';

import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';

const isDarkTheme = ref(false);
function toggleTheme() {
    isDarkTheme.value = !isDarkTheme.value;
}

const { locale, t } = useI18n();

// 获取当前语言类型
const currentLang = computed(() => locale.value);

// JS中响应式切换中英文（写入computed中即可）
const hel = computed(() => t('hello'));

getList({ id: 1 });
postList({ id: 2 });
postList3({ id: 3 });

console.log(import.meta.env);
console.log(lodash.capitalize('hello world'));

// 获取状态
const store = useLoginStore();
// 修改状态
store.updateSpp('spp');

const userStore = useUserStore();

//storeToRefs 会跳过所有的 action 属性
const { userInfo, token, newName } = storeToRefs(userStore);

//action 属性直接解构
const { updateUserInfo, updateAge, updateToken } = userStore;

const handleUser = () => {
    updateUserInfo({ name: 'lisi', age: 24 });
};

const handleAge = () => {
    //userInfo是一个ref响应式引用，需通过.value取值
    updateAge(userInfo.value.age + 1);
};

const handleToken = () => {
    updateToken('23234');
};

const changeLang = (lang: string) => {
    locale.value = lang; // 切换语言
    localStorage.setItem('lang', lang);
};
</script>

<style scoped lang="less">
.root-app {
    .spp {
        color: aqua;
    }
}
.title {
    font-size: @size-title;
    color: @color-title;
}
</style>

<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
}

.van-theme-dark body {
    color: #f5f5f5;
    background-color: black;
}

body {
    color: $red-color;

    .p2 {
        color: blue;
    }
}

.vw {
    font-size: 20px;
}

// 平板设备样式
@media (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
    .vw {
        font-size: 30px;
        color: aquamarine;
    }

    :root:root {
        --van-button-primary-background: red;
        --van-button-primary-border-color: red;
    }
}

// 电脑设备样式
@media (min-width: $desktop-min-width) {
    .vw {
        font-size: 30px;
        color: pink;
    }
}
</style>
